<template>
	<view class="page">
		<xdl-search @back_shop="back_shop"></xdl-search>
		<view class="bg-box"></view>
		<view class="plr30" style="margin-top: -180rpx;">
			<u-swiper @click="bannerClick()" :list="bannerList" keyName="bannerUrl" indicator indicatorMode="line"
				circular :height="180"></u-swiper>
		</view>

		<view class="seach-list">
			<view class="icon" v-for="(item, index) in navList" :key="index" @click="goTab(item.uri)">
				<image :src="item.images">
				</image>
				<view>{{item.title}}</view>
			</view>

		</view>

		<!--正在进行-->
		<view class="isaction plr30 mt40">
			<view style="width: 50%;font-weight: bold;font-size: 38rpx;">正在进行</view>
			<view style="width: 50%;justify-content:flex-end;display: flex;color: #909399;">
				<view style="font-size: 34rpx;" @click="more()">more&nbsp;
					<text class="G-font g-enter-arrow" style="font-size: 24rpx;"></text>
				</view>

			</view>
		</view>

		<view>
			<u-empty v-if="flowList==0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" />
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{ leftList }">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="xdlActivity(item)">
						<!-- 微信小程序需要hx2.8.11版本才支持在template中引入其他组件，比如下方的u-lazy-load组件 -->
						<u-lazy-load threshold="-450" border-radius="10" :image="item.mainPic" :index="index">
						</u-lazy-load>
						<view class="xdl-area">
							<view class="xdl-gps">
								<text class="G-font g-gps"></text>{{item.city}}｜{{item.distance}}km
							</view>
						</view>
						<view class="xdl-title">{{ item.title }}</view>
						<view class="xdl-content">{{ item.actName }}</view>
						<view class="demo-price" v-if="item.needPay">
							<text style="font-size: 20rpx;">¥</text>
							<text style="font-weight: bold;margin: 0 10rpx;">{{ item.price }}</text>
							<text style="font-size: 20rpx;color:#909399;">起</text>
						</view>
						<view class="demo-shop">
							<view style="display: flex;align-items: center;width: 90%;">
								<text class="G-font g-mall" style="font-size: 18rpx;"></text>
								{{ item.shopName }}
							</view>
							<view style="justify-content:flex-end;display: flex;">{{item.cTime}}</view>
						</view>

						<view class="is-svip" v-if="item.menberLevel && item.menberLevel!=0">
							<image src="../../static/img/svip-use.png"></image>
						</view>

					</view>
				</template>
				<template v-slot:right="{ rightList }">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index"
						@click="xdlActivity(item)">
						<u-lazy-load threshold="-450" border-radius="10" :image="item.mainPic" :index="index">
						</u-lazy-load>
						<!-- <view class="xdl-area"><text class="G-font g-gps"></text>{{item.city}}</view>
						 -->
						<view class="xdl-area">
							<view class="xdl-gps">
								<text class="G-font g-gps"></text>{{item.city}}｜{{item.distance}}km
							</view>
						</view>
						<view class="xdl-title">{{ item.title }}</view>
						<view class="xdl-content">{{ item.actName }}</view>
						<view class="demo-price" v-if="item.needPay">
							<text style="font-size: 20rpx;">¥</text>
							<text style="font-weight: bold;margin: 0 10rpx;">{{ item.price }}</text>
							<text style="font-size: 20rpx;color:#909399;">起</text>
						</view>
						<view class="demo-shop">
							<view style="display: flex;align-items: center;width: 90%;">
								<text class="G-font g-mall" style="font-size: 18rpx;"></text>
								{{ item.shopName }}
							</view>
							<view style="justify-content:flex-end;display: flex;">{{item.cTime}} </view>
						</view>


						<view class="is-svip" v-if="item.menberLevel && item.menberLevel!=0">
							<image src="../../static/img/svip-use.png"></image>
						</view>

					</view>
				</template>
			</u-waterfall>

		</view>

		<view class="xinrenhongbao">
			<image @click="goHongbao" src="https://taobao.xianmxkj.com/fubiao.png"
				style="width: 160upx;height: 160upx;position: fixed;bottom: 160upx;right: 32upx;z-index: 99;">
			</image>

		</view>


		<u-back-top right="20" bottom="50" icon="arrow-up" mode="circle" duration="300" :scrollTop="scrollTop">
		</u-back-top>



	</view>


	</view>
</template>

<script>
	import xdlSearch from '@/components/base/search/search.vue';
	import utils from '@/common/utils.js'
	import cache from '@/common/cache.js'
	export default {
		components: {
			xdlSearch
		},
		data() {
			return {
				scrollTop: 0,
				pageNo: 1,
				sceneid: "",
				bannerList: [],
				flowList: [],
				navList: [{
						title: "全地形车",
						uri: "/pages/activity/index?idx=2&curtab=1",
						images: "https://xdlapp-bucket.oss-cn-hangzhou.aliyuncs.com/xdl/car.png"
					}, {
						title: "SVIP预约",
						uri: "/pages/activity/index?idx=3&curtab=2",
						images: "https://xdlapp-bucket.oss-cn-hangzhou.aliyuncs.com/xdl/vip.png"
					}, {
						title: "露营",
						//uri: "/pages/activity/index?idx=3&curtab=3",
						images: "https://xdlapp-bucket.oss-cn-hangzhou.aliyuncs.com/xdl/camp.png"
					}, {
						title: "全部",
						uri: "/pages/activity/index?idx=1&curtab=0",
						images: "https://xdlapp-bucket.oss-cn-hangzhou.aliyuncs.com/xdl/all.png"
					}

				]

			}
		},
		onLoad(op) {
			this.getBanner();
			const opScene = op.scene;
			console.log('opScene', op)
			if (opScene) {
				console.log('opScene', opScene)
				this.invitemodel(opScene);
			}
			//this.invitemodel('userid%3D390567856549269504');
		},
		onShow() {
			this.pageNo=1;
			this.clear();
			this.flowList = [];
			this.loadData()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom: function() {
			const that=this;
			const location = uni.getStorageSync("location");
			const base = uni.getStorageSync("base");
			const params = {
				pageNo: that.pageNo + 1,
				pageSize: 10,
				status: 1,
				shopId: base.id,
				lat: location.lat,
				lng: location.lng
			}
			this.$Request.post(this.$api.activity.list, params).then(res => {
				if (res.code === 20000 && res.data != null) {
					this.flowList = [...this.flowList, ...res.data.records];
					that.pageNo ++
					//that.pageNo = that.pageNo + 1;
					console.log('that.pageNo',that.pageNo)
					//console.log('that.pageNo ++',that.pageNo ++)
				}
			})
		},
		methods: {
			async invitemodel(opScene) {
				const scene = decodeURIComponent(opScene);
				this.sceneid = scene.split('=')[1];
				const value = cache.get('setUserData', false);
				if (!value) {
					this.login();
				} else {
					if (this.sceneid == value.id) {
						this.goinvite(this.sceneid);
					}
				}

			},
			goinvite(sceneid) {
				this.$Request.get(this.$api.invite.inviteUser, {
					userid: sceneid
				}).then(res => {
					if (res.code === 20000) {
						console.log('invite success', res)
					}
				})
			},
			back_shop(e) {
				uni.removeStorageSync("base")
				uni.setStorageSync("base", e);
				this.clear();
				this.loadData()
			},
			clear() {
				this.$refs.uWaterfall.clear();
			},
			more() {
				uni.reLaunch({
					url: '/pages/activity/index'
				})
			},
			goHongbao() {
				uni.navigateTo({
					url: '/pages/mycoupon/index'
				})
			},
			goTab(v) {
				if(v){
				uni.reLaunch({
					url: v
				})	
				}else{
					uni.$u.toast('该项目未开放！');
				}
				
			},
			bannerClick(v) {
				if (v.actId) {
					utils.removeCache("actInfo");
					uni.navigateTo({
						url: '/pages/activity/components/detail?id=' + v.actId
					})
				}
			},
			xdlActivity(v) {
				console.log('v>', v)
				utils.removeCache("actInfo");
				utils.setCache('actInfo', v)
				uni.navigateTo({
					url: '/pages/activity/components/detail?id=' + v.id
				})
			},
			getBanner() {
				this.$Request.get(this.$api.banner.list).then(res => {
					if (res.code === 20000 && res.data != null) {
						this.bannerList = res.data;
					}
				})
			},
			login() {
				uni.showModal({
					content: '确定登陆小程序',
					success: (res) => {
						uni.getUserProfile({
							desc: '登录',
							success: (res) => {
								uni.login({
									success: (v) => {
										const params = {
											"code": v.code,
											"nickname": res.userInfo.nickName,
											"headImgUrl": res.userInfo.avatarUrl
										}
										this.$Request.post(this.$api.user
											.loginWithWechat, params).then(
											res => {
												if (res.code == 20000) {
													cache.put('token', res.data
														.token, 24 * 60 * 60 *
														90)
													cache.put('setUserData', res
														.data.userinfo, 24 *
														60 * 60 * 90)
													uni.showToast({
														icon: 'success',
														position: 'bottom',
														title: '登录成功'
													});
													this.goinvite(this.sceneid);
												} else {
													uni.showToast({
														icon: 'error',
														position: 'bottom',
														title: res.data
															.message
													});
												}
												uni.hideLoading()
											})
									}
								})
							},
							fail: (res) => {
								console.log(res)
							}
						});

					}
				})


			},
			loadData() {
				const location = uni.getStorageSync("location");
				const base = uni.getStorageSync("base");
				if (location.lat) {
					const params = {
						pageNo: 1,
						pageSize: 10,
						status: 1,
						shopId: base.id,
						lat: location.lat,
						lng: location.lng
					}
					console.log('params', params)
					this.$Request.post(this.$api.activity.list, params).then(res => {
						if (res.code === 20000 && res.data != null) {
							this.flowList = res.data.records; //[...this.flowList, ...res.data.records];
							console.log(this.flowList)
						}
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.xinrenhongbao image {
		animation: myfirst 1s infinite;
	}

	@keyframes myfirst {
		0% {
			transform: translate(0px, 0px);
		}

		50% {
			transform: translate(0px, -15px);
		}

		100% {
			transform: translate(0px, 0px);
		}
	}

	.xdl-area {
		margin-top: 10rpx;
		font-weight: bold;
		font-size: 30rpx;
		display: flex;

		.xdl-gps {
			font-size: 20rpx;
			background: #232121;
			opacity: 0.5;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0 10rpx;
			height: 35rpx;
			color: #ffffff;

			text {
				font-size: 20rpx;
			}
		}
	}


	.isaction {
		display: flex;
	}

	.seach-list {
		margin: 20rpx;
		border-radius: 8rpx;
		background-color: #ffffff;
		height: auto;
		display: flex;
		justify-content: flex-start;
		padding: 10upx 0;
		flex-flow: wrap;

		.icon {
			width: 25%;
			display: flex;
			flex-flow: wrap;
			justify-content: center;
			font-size: 22upx;
			color: #666;
			margin-top: 20upx;

			image {
				height: 80rpx;
				width: 80rpx
			}

			view {
				margin-top: 20rpx;
				width: 100%;
				display: flex;
				justify-content: center;
			}
		}
	}

	.bg-box {
		height: 200rpx;
		background-color: #ac4040;
		border-bottom-left-radius: 80rpx;
		border-bottom-right-radius: 80rpx;
	}

	.scroll-list {
		@include flex(column);

		&__goods-item {
			margin-right: 20px;

			&__image {
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}

			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}

		&__line {
			@include flex;
			margin-top: 10px;

			&__item {
				margin-right: 15px;

				&__image {
					width: 61px;
					height: 48px;
				}

				&__text {
					margin-top: 5px;
					color: $u-content-color;
					font-size: 12px;
					//text-align: center;
					justify-content: center;
					display: flex;
					align-items: center;
				}

				&--no-margin-right {
					margin-right: 0;
				}
			}
		}
	}

	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-img-wrap {}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.xdl-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: #767a82;
		font-weight: bold;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.xdl-content {
		font-size: 25rpx;
		color: #909399;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: #fa3534;
		color: #ffffff;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid #2979ff;
		color: #2979ff;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $xdl-color-primary;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 18rpx;
		color: #000;
		margin-top: 5px;
		display: flex;
		align-items: center;

		view {
			width: 50%;
		}
	}

	.is-svip {
		position: absolute;
		top: 15rpx;
		right: 15rpx;

		image {
			width: 70rpx;
			height: 70rpx;
		}
	}
</style>
